<!-- 通过id显示文章的标题 -->
<!-- 点击标题进入详情页 -->

<template>
  <el-card :body-style="{ padding: '8px 18px' }">
    <div slot="header" class="me-category-header">
      <!-- 最新的文章，直接用v-for循环遍历articles获取文章标题即可 -->
      <!-- 或者是最热文章，由于这是一个复用组件，是什么卡片取决于是谁引用了这个组件 -->
      <span>{{cardHeader}}</span>
    </div>

    <!-- 通过文章id显示文章的标题 -->
    <ul class="me-category-list">
       <!-- v-for循环遍历文章，通过文章id获得文章的标题 -->
      <li v-for="a in articles" @click="view(a.id)" :style="itemStyle" :key="a.id" class="me-category-item"><a>{{a.title}}</a>
      </li>
    </ul>
  </el-card>

</template>

<script>
  export default {
    name: 'CardArticle',
    props: {
      cardHeader: {
        type: String,
        required: true
      },
      articles: {
        type: Array,
        required: true
      },
      itemStyle: Object
    },
    data() {
      return {}
    },
    methods: {
      view(id) {
        // router路由动态传参携带id进入详情页
        this.$router.push({path: `/view/${id}`})
      }
    }
  }
</script>

<style scoped>
  .me-category-header {
    font-weight: 600;
  }

  .me-category-list {
    list-style-type: none;
  }

  .me-category-item {
    padding: 4px;
    font-size: 14px;
    color: #5FB878;
  }

  .me-category-item a:hover {
    text-decoration: underline;
  }
</style>
